def creates_html_plotly( df_fn:pd.DataFrame, id_dropdown:str='DD-Unique1', id_chart:str='Chart-Unique1', name_fn_plt:str='Plotly_PlotCat1', type_chart:str='bar' , data_js1:str='data'):""" This function must be printed to a quarto chunk with options: #| output: asis. Make sure to always use a unique id_chart. Otherwise the script tag will not be able to find it. """ data_js = json.dumps(df_fn.to_dict(orient="list")) header_html =\f""" <h2>Select a Category</h2><label for="{id_dropdown}">Select Column for Dropdown:</label><select id="{id_dropdown}"><option value="A">A</option><option value="B">B</option><option value="C">C</option></select><div id="{id_chart}"></div>""" data_string =f""" <script>// Sample dataconst {data_js1} = { data_js}; """ remainingString =f""" function {name_fn_plt}(category) {{ Plotly.newPlot("{id_chart}", [{{ x: [1, 2, 3, 4], y: {data_js1}[category], type: '{type_chart}', name: category}}], {{ title: `Category ${{category}}`, yaxis: {{ title: 'Value' }}, xaxis: {{ title: 'Index' }}}});}}// Initial draw{name_fn_plt}('A');// Update chart on dropdown changedocument.getElementById('{id_dropdown}').addEventListener('change', function() {{{name_fn_plt}(this.value);}});</script>"""return header_html + data_string + remainingString